import React, { PureComponent } from 'react';
import cx from 'classnames';
import './index.less';

export default class CountDown extends PureComponent {
    static defaultProps = {
        className: '',
        frontText: '',
        backText: '',
        cutDownTime: '',
        textColor: '',
        backgroundColor: '',
        numberColor: '',
        timeClassName: '',
    };

    constructor(props) {
        super(props);
        // this.timeStyle = {color: this.props.numberColor, backgroundColor: this.props.backgroundColor, width: this.props.blockWid}
        this.state = {
            hour: 0,
            min: 0,
            sec: 0,
        };
    }

    componentDidMount = () => {
        const { cutDownTime } = this.props;
        this.calculate(cutDownTime);
    };

    componentWillReceiveProps = prevprops => {
        const { cutDownTime } = prevprops;
        this.calculate(cutDownTime);
    };

    format = time => {
        if (String(time).length === 2) {
            return time;
        }
        return `0${time}`;
    };

    calculate = cutDownTime => {
        const hour = this.format(Math.floor(cutDownTime / 60 / 60));
        const min = this.format(Math.floor(cutDownTime / 60) % 60);
        const sec = this.format(Math.floor(cutDownTime % 60));
        this.setState({ hour, min, sec });
    };

    render() {
        const {
            frontText, backText, mode, textColor, className, isRaise, timeClassName
        } = this.props;
        const { hour, min, sec } = this.state;
        return (
            <span className={cx('time-text', className)} style={{ color: textColor }}>
                {frontText && <span>{frontText}</span>}
                <span className={cx('time', timeClassName)}>{hour}</span>
                {!isRaise ? (mode ? ' 时 ' : ' : ') : ':'}
                <span className={cx('time', timeClassName)}>{min}</span>
                {!isRaise ? (mode ? ' 分 ' : ' : ') : ':'}
                <span className={cx('time', timeClassName)}>{sec}</span>
                {mode && ' 秒 '}
                {backText && <span>{backText}</span>}
            </span>
        );
    }
}
